<template>
  <view>
    <view class="status-section">
      <image :src="orderStatus.image" class="icon" />
      <text class="label-text">{{ orderStatus.text }}</text>
    </view>
    <!-- 地址 -->
    <view class="address-section">
      <view class="order-content">
        <text class="yticon icon-shouhuodizhi"></text>
        <view class="cen">
          <view class="top">
            <text class="name">{{ order.receiverName }}</text>
            <text class="mobile">{{ order.receiverPhone }}</text>
          </view>
          <text class="address"
            >{{ order.receiverProvince }} {{ order.receiverCity }}
            {{ order.receiverRegion }} {{ order.receiverDetailAddress }}</text
          >
        </view>
      </view>

      <image
        class="a-bg"
        src=""
      ></image>
    </view>

    <view class="goods-section">
      <view class="g-header b-b">
        <text class="name">商品信息</text>
      </view>
      <!-- 商品列表 -->
      <view class="g-item" v-for="item in order.orderItemList" :key="item.id">
        <image :src="item.productPic"></image>
        <view class="right">
          <text class="title clamp">{{ item.productName }}</text>
          <text class="spec">{{ item.productAttr | formatProductAttr }}</text>
          <text class="promotion clamp">{{ item.promotionName }}</text>
          <view class="price-box">
            <text class="price">￥{{ item.productPrice }}</text>
            <text class="number">x {{ item.productQuantity }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 金额明细 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">商品合计</text>
        <text class="cell-tip">￥{{ order.totalAmount }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">运费</text>
        <text class="cell-tip">￥{{ order.freightAmount }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">活动优惠</text>
        <text class="cell-tip red">-￥{{ order.promotionAmount }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">优惠券</text>
        <text class="cell-tip red">-￥{{ order.couponAmount }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">积分抵扣</text>
        <text class="cell-tip red">-￥{{ order.integrationAmount }}</text>
      </view>
      <view class="yt-list-cell desc-cell">
        <text class="cell-tit clamp">备注</text>
        <text class="cell-tip">{{ order.note }}</text>
      </view>
    </view>

    <!-- 订单明细 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">订单编号</text>
        <text class="cell-tip">{{ order.orderSn }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">提交时间</text>
        <text class="cell-tip">{{ order.createTime | formatDateTime }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付方式</text>
        <text class="cell-tip">{{ order.payType | formatPayType }}</text>
      </view>
      <view
        class="yt-list-cell b-b"
        v-if="order.status == 1 || order.status == 2 || order.status == 3"
      >
        <text class="cell-tit clamp">实付金额</text>
        <text class="cell-tip">￥{{ order.payAmount }}</text>
      </view>
      <view
        class="yt-list-cell b-b"
        v-if="order.status == 1 || order.status == 2 || order.status == 3"
      >
        <text class="cell-tit clamp">付款时间</text>
        <text class="cell-tip">{{ order.paymentTime | formatDateTime }}</text>
      </view>
    </view>

    <!-- 底部 -->
    <view
      class="footer"
      v-if="order.status == 0 || order.status == 2 || order.status == 3"
    >
      <view class="action-box b-t" v-if="order.status == 0">
        <button class="action-btn" @click="cancelOrder(order.id)">
          取消订单
        </button>
        <a
          class="action-btn box b-t"
          :href="config.weChatCustomerServiceUrl"
          style="
            text-decoration: none;
            color: #fa436a;
            border: 0.5upx solid #fa436a;
          "
          >联系客服</a
        >
        <!-- <button class="action-btn recom" @click="payOrder(order.id)">立即付款</button> -->
      </view>
      <view class="action-box b-t" v-if="order.status == 2">
        <button class="action-btn">查看物流</button>
        <button class="action-btn recom" @click="receiveOrder(order.id)">
          确认收货
        </button>
      </view>
      <view class="action-box b-t" v-if="order.status == 3">
        <button class="action-btn">申请售后</button>
        <button class="action-btn recom">评价商品</button>
      </view>
      <view class="price-content" v-if="order.status == 0">
        <text>应付金额</text>
        <text class="price-tip">￥</text>
        <text class="price">{{ order.payAmount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../config/index';
import {
  fetchOrderDetail,
  cancelUserOrder,
  confirmReceiveOrder,
} from '@/api/order.js';
import { formatDate } from '@/utils/date';
export default {
  data() {
    return {
      config,
      orderId: null,
      order: {},
      orderStatus: {},
    };
  },
  onLoad(option) {
    //商品数据
    this.orderId = option.orderId;
    this.loadData();
  },
  filters: {
    formatProductAttr(jsonAttr) {
      let attrArr = JSON.parse(jsonAttr);
      let attrStr = '';
      for (let attr of attrArr) {
        attrStr += attr.key;
        attrStr += ':';
        attrStr += attr.value;
        attrStr += ';';
      }
      return attrStr;
    },
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    },
    formatPayType(payType) {
      if (payType == 0) {
        return '未支付';
      } else if (payType == 1) {
        return '支付宝支付';
      } else if (payType == 2) {
        return '微信支付';
      }
      return null;
    },
  },
  methods: {
    //生成确认单信息
    async loadData() {
      fetchOrderDetail(this.orderId).then((response) => {
        this.order = response.data;
        this.setOrderStatus(this.order.status);
      });
    },
    submit() {},
    stopPrevent() {},
    //取消订单
    cancelOrder(orderId) {
      let superThis = this;
      uni.showModal({
        title: '提示',
        content: '是否要取消该订单？',
        success: function (res) {
          if (res.confirm) {
            uni.showLoading({
              title: '请稍后',
            });
            cancelUserOrder({
              orderId: orderId,
            }).then((response) => {
              uni.hideLoading();
              superThis.loadData();
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    //支付订单
    payOrder(orderId) {
      uni.redirectTo({
        url: `/pages/money/pay?orderId=${orderId}`,
      });
    },
    //确认收货
    receiveOrder(orderId) {
      let superThis = this;
      uni.showModal({
        title: '提示',
        content: '是否要确认收货？',
        success: function (res) {
          if (res.confirm) {
            uni.showLoading({
              title: '请稍后',
            });
            confirmReceiveOrder({
              orderId: orderId,
            }).then((response) => {
              uni.hideLoading();
              superThis.loadData();
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    //设置订单状态信息
    setOrderStatus(status) {
      switch (status) {
        case 0:
          this.orderStatus = {
            text: '等待付款',
            image: '/static/icon_wait.png',
          };
          break;
        case 1:
          this.orderStatus = {
            text: '等待发货',
            image: '/static/icon_deliver.png',
          };
          break;
        case 2:
          this.orderStatus = {
            text: '等待收货',
            image: '/static/icon_receive.png',
          };
          break;
        case 3:
          this.orderStatus = {
            text: '交易完成',
            image: '/static/icon_finish.png',
          };
          break;
        case 4:
          this.orderStatus = {
            text: '交易关闭',
            image: '/static/icon_close.png',
          };
          break;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: $page-color-base;
  padding-bottom: 100upx;
}

.status-section {
  height: 200upx;
  background-color: $base-color;
  display: flex;
  align-items: center;
  padding: 30upx;

  .icon {
    width: 48upx;
    height: 48upx;
  }

  .label-text {
    color: #fff;
    margin-left: 30upx;
  }
}

.address-section {
  padding: 30upx 0;
  background: #fff;
  position: relative;

  .order-content {
    display: flex;
    align-items: center;
  }

  .icon-shouhuodizhi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90upx;
    color: #888;
    font-size: 44upx;
  }

  .cen {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 28upx;
    color: $font-color-dark;
  }

  .name {
    font-size: 34upx;
    margin-right: 24upx;
  }

  .address {
    margin-top: 16upx;
    margin-right: 20upx;
    color: $font-color-light;
  }

  .icon-you {
    font-size: 32upx;
    color: $font-color-light;
    margin-right: 30upx;
  }

  .a-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 5upx;
  }
}

.goods-section {
  margin-top: 16upx;
  background: #fff;
  padding-bottom: 1px;

  .g-header {
    display: flex;
    align-items: center;
    height: 84upx;
    padding: 0 30upx;
    position: relative;
  }

  .logo {
    display: block;
    width: 50upx;
    height: 50upx;
    border-radius: 100px;
  }

  .name {
    font-size: 30upx;
    color: $font-color-base;
    margin-left: 24upx;
  }

  .g-item {
    display: flex;
    margin: 20upx 30upx;

    image {
      flex-shrink: 0;
      display: block;
      width: 140upx;
      height: 140upx;
      border-radius: 4upx;
    }

    .right {
      flex: 1;
      padding-left: 24upx;
      overflow: hidden;
    }

    .title {
      font-size: 30upx;
      color: $font-color-dark;
    }

    .spec {
      font-size: 26upx;
      color: $font-color-light;
    }

    .promotion {
      font-size: 24upx;
      color: $base-color;
    }

    .price-box {
      display: flex;
      align-items: center;
      font-size: 32upx;
      color: $font-color-dark;
      padding-top: 10upx;

      .price {
        margin-bottom: 4upx;
      }

      .number {
        font-size: 26upx;
        color: $font-color-base;
        margin-left: 20upx;
      }
    }

    .step-box {
      position: relative;
    }
  }
}

.yt-list {
  margin-top: 16upx;
  background: #fff;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 10upx 30upx 10upx 40upx;
  line-height: 70upx;
  position: relative;

  &.cell-hover {
    background: #fafafa;
  }

  &.b-b:after {
    left: 30upx;
  }

  .cell-icon {
    height: 32upx;
    width: 32upx;
    font-size: 22upx;
    color: #fff;
    text-align: center;
    line-height: 32upx;
    background: #f85e52;
    border-radius: 4upx;
    margin-right: 12upx;

    &.hb {
      background: #ffaa0e;
    }

    &.lpk {
      background: #3ab54a;
    }
  }

  .cell-more {
    align-self: center;
    font-size: 24upx;
    color: $font-color-light;
    margin-left: 8upx;
    margin-right: -10upx;
  }

  .cell-tit {
    flex: 1;
    font-size: 26upx;
    color: $font-color-light;
    margin-right: 10upx;
  }

  .cell-tip {
    font-size: 26upx;
    color: $font-color-dark;

    &.disabled {
      color: $font-color-light;
    }

    &.active {
      color: $base-color;
    }

    &.red {
      color: $base-color;
    }
  }

  &.desc-cell {
    .cell-tit {
      max-width: 90upx;
    }
  }

  .desc {
    flex: 1;
    font-size: $font-base;
    color: $font-color-dark;
  }

  .integration {
    flex: 1;
    font-size: $font-base;
    color: $font-color-dark;
    text-align: right;
  }
}

/* 支付列表 */
.pay-list {
  padding-left: 40upx;
  margin-top: 16upx;
  background: #fff;

  .pay-item {
    display: flex;
    align-items: center;
    padding-right: 20upx;
    line-height: 1;
    height: 110upx;
    position: relative;
  }

  .icon-weixinzhifu {
    width: 80upx;
    font-size: 40upx;
    color: #6bcc03;
  }

  .icon-alipay {
    width: 80upx;
    font-size: 40upx;
    color: #06b4fd;
  }

  .icon-xuanzhong2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60upx;
    height: 60upx;
    font-size: 40upx;
    color: $base-color;
  }

  .tit {
    font-size: 32upx;
    color: $font-color-dark;
    flex: 1;
  }
}

.footer {
  position: fixed;
  flex-direction: row-reverse;
  left: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90upx;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  z-index: 998;
  color: $font-color-base;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

  .price-content {
    padding-left: 30upx;
  }

  .price-tip {
    color: $base-color;
    margin-left: 8upx;
  }

  .price {
    font-size: 36upx;
    color: $base-color;
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280upx;
    height: 100%;
    color: #fff;
    font-size: 32upx;
    background-color: $base-color;
  }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: 0.3s;

  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: 0.3s;
    overflow-y: scroll;
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, 0.4);

    .mask-content {
      transform: translateY(0);
    }
  }
}

/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;

  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }

  .time {
    font-size: 24upx;
    color: $font-color-light;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }

  .price {
    font-size: 44upx;
    color: $base-color;

    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }

  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }

  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;

    &.r {
      left: auto;
      right: -6upx;
    }
  }
}

.action-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100upx;
  position: relative;
  padding-right: 30upx;
}

.action-btn {
  width: 160upx;
  height: 60upx;
  margin: 0;
  margin-left: 24upx;
  padding: 0;
  text-align: center;
  line-height: 60upx;
  font-size: $font-sm + 2upx;
  color: $font-color-dark;
  background: #fff;
  border-radius: 100px;

  &:after {
    border-radius: 100px;
  }

  &.recom {
    background: #fff9f9;
    color: $base-color;

    &:after {
      border-color: #f7bcc8;
    }
  }
}
</style>
